<template>
  <div>
     <Appdownload></Appdownload>
    <div class="detail" >
      <div class="detail-con">
        <img :src="deils.imge" alt="" class="deta-img" />
        <div class="detai-price">￥{{ deils.prices }}</div>
        <div class="datai-text">{{ deils.texts }}</div>
      </div>
      <div class="detai-texs">
        <span>今天是美好的一天，美丽天空升起了耀眼的太阳</span>
        <p>
          千万不要放纵自己，给自己找借口。对自己严格一点儿，时间长了，自律便成为一种习惯，一种生活方式，
          你的人格和智慧也因此变得更加完美。
          下面小编为大家总结了一些关于自律的句子，希望大家喜欢
        </p>
        <span>
          我的侄女是个高手，那次她想买一个裙子只用三部:第一部:登录妈妈的账号，第二部:将裙子加入购物车，
          最后一部:借用妈妈发一条微信给爸爸:老公帮我清空购物车。都说，人生是一场修行，我却觉得，时光，才是一种禅定。
          于时光并走，伴时光从容，品时光沉静，随时光优雅。走自己的路，做最好的自己，要活出精彩，活成自己想要的状态。
          这些，是别人帮不了的，唯有靠自己。不忧虑潦倒的现在，不畏惧未知的未来，坦然前行，努力奋斗，且去迎接那一场春暖花开的盛宴。
        </span>
      </div>
      <div class="detail-bottom">
        <button class="deta-btn1" @click="zo()">
          <img src="../assets/11.png" alt="" class="databtn-img1" />
          <span>周边</span>
        </button>
        <button class="deta-btn2" @click="showPopup">立即购买</button>
      </div>
      <van-popup
        v-model="show"
        round
        position="bottom"
        :style="{ height: '45%' }"
      >
        <div v-for="(item, index) in gos" :key="index" class="gowu">
          <div class="gowus">
            <img :src="deils.imge" alt="" class="gos-imgo" />
            <div class="go-s">
              <div class="go-priceo">${{ item.priceo }}</div>
              <div class="go-texto">{{ item.texto }}</div>
            </div>
          </div>
          <p class="go-p1">规格</p>
          <span class="go-sp1">123465</span>
          <div class="go-suan">
            <span class="go-sp2">数量</span>
            <div class="go-btns">
              <button @click="jian()" class="jian">-</button>
              <input type="text" value="0" size="1" v-model="count" />
              <button @click="jia()" class="jia">+</button>
            </div>
          </div>
           <button class="xing-go" @click="fq()">立即购买</button>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
import  Appdownload from "./appDownload.vue"
import instance from "../request/api.js";
export default {
  name: "detail",

  data() {
    return {
      deils: '',
      gos: [],
      show: false,
      count: 0,
    };
  },
  components:{
       Appdownload
  },
  mounted() {
    this.fg();
  },
  created() {
    //  console.log(this.$route.params.name);
    //  this.deils=this.$route.params.name.deils
    // this.deils= JSON.parse(localStorage.getItem('namea'))
    this.getLocalData();

  },
  methods: {
    showPopup() {
      this.show = true;
    },
    zo() {
      this.$router.push("/ambitus");
    },
    async fg() {
      let { data } = await instance.get("/ambits.json");
      //  console.log(data.gos)
      this.gos = data.gos;
    },
    jia() {
      this.count++;
      // console.log(count)
    },
    jian() {
      if (this.count <= 0) {
        this.count = 0;
      } else {
        this.count -= 1;
      }
      //console.log(count)
    },
    fq() {
      this.$router.push({
        name: "Payment",
      });
    },
    getLocalData() {
      this.deils=JSON.parse(localStorage.getItem("namea"))
      // console.log(this.deils);
    },
  },
};
</script>

<style lang="less" scoped>
.detail {
  overflow: hidden;
  position: relative;
  width: 100%;
}
.detail-con {
  .deta-img {
    width: 100%;
    height: 414px;
  }
  .detai-price {
    font-size: 27px;
    color: red;
  }
  .datai-text {
    font-size: 19px;
    color: #000;
    padding: 11px 0px 22px;
      
  }
}
.detai-texs {
  font-size: 15px;
  padding: 0 20px 80px 20px;
}
.detail-bottom {
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  width: 100%;
  button {
    border: 0;
  }
  .deta-btn1 {
    width: 50%;
    height: 55px;
    background:#fff;
    display: flex;
      justify-content: center;
    align-items: center;
    .databtn-img1 {
      width: 19px;
      height: 19px;
    }
    span{
      font-size: 15px;
    }
  }
  .deta-btn2 {
    width: 50%;
    height: 55px;
    font-size: 17px;
    color: #fff;
    background: #eb484a;
  }
}
.gowu {
  box-sizing: border-box;
  margin: 20px;
  // position: relative;
  .gowus {
    display: flex;
    align-items: center;
    height: auto;
    .go-s {
      margin-left: 30px;
      .go-priceo {
        font-size: 24px;
        color: red;
        margin-bottom: 20px;
      }
      .go-texto {
        font-size: 12px;
        color: #000;
      }
    }
  }
  .go-p1 {
    font-size: 16px;
    color: #000;
    margin-top: 15px;
  }
  .go-sp1 {
    display: block;
    font-size: 14px;
    color: #000;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
  }
}
.go-suan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0;

  .go-sp2 {
    font-size: 17px;
    color: #333;
  }
  .go-btns {
    height: 50px;
    margin-top: 10px;
    button {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      font-size: 12px;
      border: none;
      background: #f2f2f2;
      color: #000;
      margin: 0 14px 0 14px;
    }
    input {
      font-size:20px;
      text-align: center;
    }
  }
}
.xing-go {
  width: 100%;
  height: 55px;
  border: none;
  font-size: 17px;
  background: #eb484a;
  color: #fff;
  position: absolute;
  left: 0;
  bottom: 0;
}
.gos-imgo {
  width: 88px;
  height: 88px;
}
</style>